<template>
  <view class="item" @click="handleClick" :style="{ background: bg }">
    <slot>
      <view class="item__icon">
        <image :src="require('@/static/' + icon + '.png')" mode="scaleToFill" class="img" />
      </view>
      <view class="item__right">
        <view class="flex">
          <view class="item__right__title">
            {{ title }}
          </view>
          <view class="item__right__sub" v-if="sub">{{ sub }}</view>
        </view>
        <image v-if="arrow" :src="require('@/static/' + arrow + '.png')" mode="scaleToFill" class="img" />
      </view>
    </slot>
  </view>
</template>

<script>
import { router } from '@/router'
import throttle from '@/utils/throttle'

export default {
  props: {
    arrow: {
      type: String,
      default: null,
    },
    title: {
      type: String,
      default: '',
    },
    sub: {
      type: String,
      default: '',
    },
    icon: {
      type: String,
      default: 'icon',
    },
    bg: {
      type: String,
      default: '#fff',
    },
    routerObject: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {}
  },
  components: {},
  methods: {
    handleClick() {
      throttle(() => {
        router.push(this.routerObject)
      }, 1000)
    },
  },
}
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 18rpx;
  background: linear-gradient(90deg, #c9e7f3, #ffffff);
  border-radius: 20rpx;
  margin-top: 24rpx;
  overflow: hidden;
  &__icon {
    min-width: 79rpx;
    height: 79rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 13rpx;
    .img {
      width: 100%;
      height: 100%;
    }
  }
  &__right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    &__title {
      font-size: 34rpx;
      font-weight: bold;
      display: flex;
      align-items: center;
    }

    &__sub {
      font-size: 24rpx;
      color: #8694a3;
      margin-top: 6rpx;
    }

    .flex {
      flex: 1;
    }

    .img {
      width: 44rpx;
      height: 44rpx;
    }
  }
}
</style>
